<template>
    <div>
        <ImgCutter ref="imgCutterModal"
                   :cross-origin="true"
                   :tool-bgc="'none'"
                   :is-modal="true"
                   :show-choose-btn="true"
                   :lock-scroll="true"
                   :box-width="500"
                   :box-height="300"
                   :cut-width="200"
                   :cut-height="200"
                   :size-change="true"
                   :move-able="true"
                   @cutDown="xztpCutDown">
<!--            <el-button slot="open" type="primary">选择图片</el-button>-->
            <div class="upload" slot="open" type="primary"style="overflow: hidden">
                <i v-show="img == ''" class="el-icon-plus"></i>
                <img ref="img" style="position: absolute;width: 100%;left: 50%;top: 50%;transform: translate(-50%,-50%)" :src="img">
            </div>
        </ImgCutter>
<!--        <el-button @click="base">按钮</el-button>-->
    </div>
</template>

<script>
    // import {getBase64} from './urlToBase'
    import ImgCutter from 'vue-img-cutter'

    export default {
        name: "imgUpload",
        props:{
            url:{
                type:String,
                default:""
            }
        },
        data(){
            return{
                img:'',
                imgBase:''
            }
        },
        mounted(){
            console.log('this.url',this.url,this.url.split('.').pop().toLowerCase());
            // console.log(this.$refs.img);
            let apiName = window.location.host.split('.')[0];
            console.log('apiName',apiName)
            this.img = this.url.replace('api',apiName)
            console.log('this.img',this.img.split('?')[0])
            // if(this.img !== ''){
            //     // getBase64('https://p2.ssl.qhimgs1.com/sdr/400__/t01dd8f8500832eb218.jpg','jpg',(base64) =>{
            //     //     console.log(base64)
            //     //     this.$emit('upload',base64);
            //     // })
            //     // console.log(this.$refs.imgCutterModal.dataURL)
            //     getBase64(this.img.split('?')[0]).then(res =>{
            //         this.$emit('upload',res);
            //         // console.log(res)
            //     })
            // }
        },
        components: {
            ImgCutter
        },
        methods: {
            //裁剪后触发上传事件
            xztpCutDown(fileName) {
                console.log(fileName, '确定裁剪后的base64')
                this.img = fileName.dataURL;
                this.$emit('upload',fileName.dataURL);
            },
            base(){
                function getBase64Image(img) {
                    console.log(img.width)
                    var canvas = document.createElement("canvas");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    var dataURL = canvas.toDataURL();
                    console.log('dataURL',dataURL)
                    return dataURL;
                }
                // console.log(this.$refs.img)
                let imgbase64 = getBase64Image(this.$refs.img)
                this.$emit('upload',imgbase64);
            }
        }
    }
</script>

<style scoped>
.upload{
    position: relative;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
    text-align: center;
}
</style>
